import React, { useEffect, useRef, useState } from "react";
import { Modal,Spin,Button,Divider,Empty, message} from 'antd';
import {DeleteOutlined} from '@ant-design/icons'


const PreviewAudio = (props) => {
  const {isModalVisible, setIsModalVisible,pictureUrl,coorList,setCoorList,getNewCoor,width} = props

  const coor = useRef(null)

  const img = useRef(null)

  const coorItem = useRef(null)

  const [imgInfo,setImgInfo] = useState({width:0,height:0})

  const [coorWidth,setCoorWidth] = useState(0)
  const [coorHight,setCoorHght] = useState(0)

  const [showList,setShowList] = useState([])



  useEffect(()=>{
    const value = width?width / 2 / 600:imgInfo.width / 600

    setShowList(coorList.map((i, index) => {
      return {
        width: Math.floor(i[2].x / value) - Math.floor(i[0].x / value),
        height: Math.floor(i[1].y / value) - Math.floor(i[0].y / value),
        left: Math.floor(i[0].x / value),
        top: Math.floor(i[0].y / value)
      }
    }))
  },[coorList]) // eslint-disable-line react-hooks/exhaustive-deps



  useEffect(()=>{
   
    setTimeout(()=>{
      if(img.current){
        setImgInfo({
          width:img.current.naturalWidth / 2, 
          height:img.current.naturalHeight / 2
        })
       }
    },800)

  },[isModalVisible])


  const onCancel = () => {
    setCoorWidth(0)
    setCoorHght(0)
    coorItem.current=[]
    setShowList([])
    setCoorList([])

    setIsModalVisible(false);
  };
  // 开始圈图
  const  mousedown = (e) => {
    e.preventDefault()
    setCoorWidth(2)
    setCoorHght(2)

    const c = e.pageX - (document.body.clientWidth - 1200) / 2 - 24
    const d = e.pageY - 179
   
    coor.current.style.left = e.pageX - (document.body.clientWidth - 1200) / 2 - 24 + 'px'
    coor.current.style.top = e.pageY - 179 + 'px'
    var bbb = ''
    var ccc = ''

    document.onmousemove = (e) => {
      if (e.pageX - (document.body.clientWidth - 1200) / 2 - 24 >= 600) {
        document.onmousemove = null
        return
      }
      if (e.pageY - 179 >= (600 / imgInfo.width) * imgInfo.height) {
        document.onmousemove = null
        return
      }
      // 鼠标移动时逻辑
      setCoorWidth(e.pageX - (document.body.clientWidth - 1200) / 2 - 24 - c)


      setCoorHght(e.pageY - 179 - d)

       bbb = e.pageX - (document.body.clientWidth - 1200) / 2 - 24 - c
      
       ccc = e.pageY - 179 - d

    }
    document.onmouseup = (e) => {

      const value = imgInfo.width / 600

     const ddd = [{ x: c > 0 ? Math.floor(c * value) : 0, y: d > 0 ? Math.floor(d * value) : 0 },
      { x: c > 0 ? Math.floor(c * value) : 0, y: d + ccc > 0 ? Math.floor((d + ccc) * value) : 0 },
      { x: c + bbb > 0 ? Math.floor((c + bbb) * value) : 0, y: d + ccc > 0 ? Math.floor((d + ccc) * value) : 0 },
      { x: c + bbb > 0 ? Math.floor((c + bbb) * value) : 0, y: d  > 0 ? Math.floor(d * value) : 0 }]
      

      coorItem.current = ddd

      
      // 抬起鼠标时的逻辑
      document.onmousemove = null
    }
  }
  // 保存圈图
  const saveCoor = () => {
    if(!coorItem.current) {
      message.error('你确定你圈了吗？')
      return
    }
    setCoorList(value=>[...value,coorItem.current])


    setCoorWidth(0)
    setCoorHght(0)
  }
  // 清空
  const clearCoor = () => {
    setCoorList([])
  }
  // 确认修改
  const yesEdit = () => {
    getNewCoor(coorList)

    onCancel()
  }
  // 移除单个
  const removeCoor = (i) => {
    setCoorList(value=>value.filter((x,y)=>y!==i))
  }
  
  return  <Modal footer={null} wrapClassName="modal-game" width={1200} destroyOnClose title={'圈图游戏'}  visible={isModalVisible}  onCancel={onCancel}>

   <Spin tip="Loading..." spinning={imgInfo.width===0}>

   <div className="cool-picture"   onMouseDown={mousedown}>
        
        <img src={pictureUrl} ref={img} alt="" style={{width:'600px',height:"auto"}}/>

        <div className="coor" ref={coor} style={{backgroundColor:'red',position:'absolute',width:coorWidth,height:coorHight,borderRadius:'8px',opacity:0.3}}></div>

        {
          showList.length? <>
          {
            showList.map((i,j)=>{
              return  <div key={j} style={{backgroundColor:'rgb(68 58 58 / 50%)',color:'red',position:'absolute',width:i.width + 'px',height:i.height + 'px',left:i.left+'px',top:i.top+'px',borderRadius:'8px',fontSize:'40px'}}>
               {j+1}
              </div>
            })
          }
        </>:''
        }
    </div>

    <div className="cool-data">
        <div className="cool-head">
           <Button type={'primary'} size={'small'} onClick={saveCoor}>保存圈图</Button>
           <Button type={'primary'} size={'small'} danger onClick={clearCoor}>清空圈图</Button>
           <Button type={'primary'} size={'small'} onClick={yesEdit}>确认修改</Button>
        </div>

        <Divider>圈图坐标</Divider>

        {
          coorList.length? <ul>
          {
            coorList.map((i,j)=>{
              return  <li key={j}>
               {j+1}.{JSON.stringify(i)}&nbsp;&nbsp;<DeleteOutlined onClick={()=>removeCoor(j)} className="icon"/>
              </li>
            })
          }
        </ul>:<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        }

       
      
    </div>
   </Spin>

   </Modal>

}
export default PreviewAudio